// 放大镜逻辑实现

/* 
变量名的定义 
    show  图片显示区域
    mask  遮罩层
    list  切换列表
    enlarge  放大镜的盒子
我们要做的事情
    计算比例
        => 我们要根据 show mask enlarge 以及enlarge中的图片的大小来计算一个比例
        => 要改变的是enlarge
        => show mask以及enlarge中的图片的大小  求出enlarge的大小
    移入移出
        => 鼠标进入show盒子    让mask 盒子和enlarge盒子显示
        => 鼠标移出show盒子    让mask 盒子和enlarge盒子隐藏
    移入联动
        => mask盒子要跟随鼠标移动
        => enlarge盒子中的图片按照计算比例移动
    列表切换
        => 点击对应的列表中的小图让show盒子中的图片路径改变
        => enlarge盒子中的图片的路径改变
        => 对应的类名发生改变

属性
    => 范围元素
    => 获取到 show 盒子
    => 获取到 mask 盒子
    => 获取到 list 盒子
    => 获取到 enlarge 盒子
    => 获取 enlarge 盒子中的图片
    => show 盒子的大小
    => mask 盒子的大小
    => enlarge 盒子的大小 计算出来
    => enlarge 盒子中图片的大小

方法
    => 计算比例
    => 移入移出
    => 点击切换
    => 移动跟随

*/
// 定义一个类
class Enlarge {
    constructor(select) {
        // 获取元素
        this.ele = document.querySelector(select)
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        this.picture = this.enlarge.firstElementChild
        // 获取尺寸
        this.show_w = this.show.clientWidth
        this.show_h = this.show.clientHeight
        this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
        this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
        this.picture_w = parseInt(window.getComputedStyle(this.picture).width)
        this.picture_h = parseInt(window.getComputedStyle(this.picture).height)

        // 方法调用
        this.setScale()
        this.overOut()
        this.setClick()
        this.move()

    }
    // 计算尺寸

    /* 
        mask盒子的宽度         enlarge盒子的宽度 (x) 
      ----------------  =  -----------------------------
        show盒子的宽度              图片的宽度
    
    */
    setScale() {
        // // 计算enlarge盒子的尺寸
        this.enlarge_w = this.mask_w * this.picture_w / this.show_w
        this. enlarge_h = this.mask_h * this.picture_h / this.show_h
        // let enlarge_w = this.mask_w * this.picture_w / this.show_w
        // let enlarge_h = this.mask_h * this.picture_h / this.show_h
        // // // 赋值
        // this.enlarge.style.width = enlarge_w + 'px'
        // this.enlarge.style.height = enlarge_h + 'px'

    }
    // 移入移出
    overOut() {
        // 添加事件
        this.show.addEventListener('mouseover', () => {
            // console.log(111);
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })

        this.show.addEventListener('mouseout', () => {
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'
        })

    }
    // 点击切换
    setClick() {


        // 利用事件委托添加事件
        this.list.addEventListener('click', e => {
            e = e || window.event
            const target = e.target || e.srcElement
            // 判断是不是img标签
            if (target.nodeName !== 'IMG') return
            // 清除类名
            for (let i = 0; i < this.list.children.length; i++) {
                this.list.children[i].classList.remove('active')
            }
            // 给对应的添加类名
            target.classList.add('active')

            // 获取自定义属性
            const showSrc = target.dataset.show
            const pictureSrc = target.dataset.bg
            // console.log(showSrc, pictureSrc);
            // 设置给对应的元素
            this.show.firstElementChild.src = showSrc
            this.picture.src = pictureSrc
        })

    }
    // 跟随移动
    move() {


        // 添加鼠标移动事件  给show盒子
        this.show.addEventListener('mousemove', (e) => {
            e = e || window.event

            // 获取坐标点的值

            let x = e.offsetX - this.mask_w / 2
            let y = e.offsetY - this.mask_h / 2
            // console.log(x, y);

            // 边界值判断

            if (x <= 0) x = 0
            if (y <= 0) y = 0
            if (x >= this.show_w - this.mask_w) x = this.show_w - this.mask_w
            if (y >= this.show_h - this.mask_h) y = this.show_h - this.mask_h
            // 赋值
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            // enlarge盒子中的图片的位置改变
            /*
                      mask移动的距离                    mask和的宽度
               -----------------------------    =   -----------------
                enlarge中的图片移动的距离 (x)          enlarge盒子的宽度
            
            
            */
            let picture_x = x * this.enlarge_w / this.mask_w
            let picture_y = y * this.enlarge_h / this.mask_h
            // console.log(this.enlarge_w, this.enlarge_h);
            // console.log(picture_x, picture_y);

            // 赋值
            this.picture.style.left = -picture_x + 'px'
            this.picture.style.top = -picture_y + 'px'

        })
    }

}